﻿@page "/dialog/draggable"

@using Syncfusion.Blazor.Popups

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This example demonstrates the drag-and-drop operation of the dialog component. To begin drag-and-drop operation, select a dialog's header using mouse and drop them in the desired location. The dialog can be draggable within the sample container. Enable the 'Open' button to reopen the dialog if it is closed.</p>
</SampleDescription>
<ActionDescription>
   <p>A drag-and-drop operation is enabled using the <code>AllowDragging</code> property. when you configure the <code>Target</code> property, the dialog can be draggable within its target container alone. The drag-and-drop feature is used to reposition the dialog dynamically.</p>
   <p>More information on the draggable operation of Dialog can be found in the<a target="_blank" href="https://blazor.syncfusion.com/documentation/dialog/draggable/"> documentation section </a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section" id="target">
    <div>
        @if (this.ShowButton)
        {
            <button class="e-btn" @onclick="@OnClicked">Open</button>
        }
    </div>
    <SfDialog Target="#target" Width="300px" AllowDragging="true" IsModal="true" ShowCloseIcon="true" @bind-Visible="Visibility">
        <DialogTemplates>
            <Header> Drag Me!!!</Header>
            <Content> This is a dialog with draggable support.</Content>
        </DialogTemplates>
        <DialogEvents OnOpen="@DialogOpen" Closed="@DialogClose"></DialogEvents>
    </SfDialog>
</div>

<style>
    #target {
        height: 500px;
    }
</style>

@code {
    private bool Visibility { get; set; } = true;
    private bool ShowButton { get; set; } = false;

    private void DialogOpen(Object args)
    {
        this.ShowButton = false;
    }

    private void DialogClose(Object args)
    {
        this.ShowButton = true;
    }

    private void OnClicked()
    {
        this.Visibility = true;
    }
}